<!--
 * @Descripttion: 
 * @Author: liujx
 * @Date: 2020-07-03 16:50:29
--> 
<template>
  <div class="history">
    <div class="search">
      <van-search
        v-model="value"
        show-action
        placeholder="搜索创意名称"
        @search="onSearch"
        class="search-input"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
      <svg viewBox="0 0 1000 1000" class="nav-back">
        <path
          fill="#969799"
          fill-rule="evenodd"
          d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"
        />
      </svg>
    </div>

    <div class="record">
      <p>历史记录</p>
      <van-icon name="delete" class="record-icon" />
    </div>

    <div class="record-tag">
      <van-tag>情人节告白</van-tag>
      <van-tag type="primary">鲜花</van-tag>
      <van-tag type="primary">日式料理</van-tag>
    </div>
  </div>
</template>

<script>
import {
  Search,
  Toast,
  Tag,
  Icon,
  CellGroup,
  Swipe,
  SwipeItem,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton
} from "vant";

export default {
  components: {
    [Search.name]: Search,
    [Toast.name]: Toast,
    [Tag.name]: Tag,
    [Icon.name]: Icon,
    [CellGroup.name]: CellGroup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionIcon.name]: GoodsActionIcon,
    [GoodsActionButton.name]: GoodsActionButton
  },

  data() {
    return {
      value: ""
    };
  },
  methods: {
    onSearch(val) {
      Toast(val);
    }
  }
};
</script>

<style lang="less">
.history {
  .search {
    background-color: #fff;
    position: relative;
    .nav-back {
      position: absolute;
      top: 10px;
      left: 3px;
      width: 30px;
      height: 30px;
      cursor: pointer;
      transform: translate3d(0, 0, 0);
    }
    &-input {
      margin-left: 35px;
    }
  }

  .record {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-left: 15px;
    font-size: 15px;
    line-height: 15px;
    color: #232326;
    position: relative;
    &-icon {
      position: absolute;
      top: 15px;
      right: 25px;
    }
  }

  .record-tag {
    min-height: 200px;
    span {
      margin-left: 10px;
    }
  }
}
</style>
